<template>
  <GcTable
    ref="instanceTable"
    v-loading="loading"
    :columns="ROLE_MANAGE_COLUMN"
    :tableData="tableData"
    :showPage="false"
    :showFilter="false"
    :showSearch="false">
    <template #btn-group>
      <el-button
        v-permission="'role-manage-permission:btn:add'"
        type="primary"
        @click="currentRole = null; roleModalVisible = true">新增角色</el-button>
    </template>
    <template #status="{ row }">
      <span
        :class="[row.status === '0' ? 'text-error' : 'text-success']">
        {{ row.status === '0' ? '禁用' : '启用' }}
      </span>
    </template>
    <template #type="{ row }">
      <span
        :class="[row.type === '0' ? 'text-error' : 'text-success']">
        {{ row.type === '0' ? '系统角色' : '自定义角色' }}
      </span>
    </template>
    <template #operate="{ row }">
      <div class="operate-btn-group center">
        <gc-icon-button
          type="link"
          v-permission="'role-manage-permission:btn:edit'"
          @click="updateRole(row)">编辑</gc-icon-button>
        <gc-icon-button
          type="link"
          v-permission="'role-manage-permission:btn:allocate'"
          @click="currentRole = row; allocateVisible = true">权限分配</gc-icon-button>
        <gc-icon-button
          type="link"
          v-permission="'role-manage-permission:btn:delete'"
          @click="deleteRole(row.id)"
          v-if="row.type !== '0'">删除</gc-icon-button>
      </div>
    </template>
  </GcTable>
  <OperateRoleModal
    v-if="roleModalVisible"
    @close-modal="closeModal"
    :roleInfo="currentRole" />
  <PermissionAllocate
    v-if="allocateVisible"
    @close-modal="allocateVisible = false"
    :roleId="currentRole?.id" />
</template>

<script setup lang="ts" name="RoleManage">
import { ref } from 'vue'
import { ROLE_MANAGE_COLUMN } from './const'
import usePagination from '@/hooks/usePagination'
import type { Role } from '@/http/type'
import { apiGetRoleList, apiDeleteRole } from '@/http/service'
import { ElMessageBox, ElMessage } from 'element-plus'
import OperateRoleModal from './components/OperateRoleModal.vue'
import PermissionAllocate from './components/PermissionAllocate.vue'

const instanceTable = ref()
const { loading } = usePagination()
const tableData = ref<Array<Role>>([])
const currentRole = ref<null | Role>(null)
const roleModalVisible = ref(false)
const allocateVisible = ref(false)

/**
 * 角色列表树查询
 */
async function findRoleList () {
  loading.value = true
  try {
    const data = await apiGetRoleList<Array<Role>>()
    tableData.value = data
  } catch (error) {
    tableData.value = []
  } finally {
    loading.value = false
  }
}
findRoleList()

/**
 * 角色删除
 * @param id
 */
async function deleteRole (id: number) {
  await ElMessageBox.confirm(
    '删除角色后可能会影响用户使用权限，确认删除？',
    '提示',
    {
      type: 'warning'
    }
  )
  await apiDeleteRole(id)
  ElMessage.success('删除角色成功')
  findRoleList()
}

function updateRole (resourceItem: Role) {
  currentRole.value = resourceItem
  roleModalVisible.value = true
}

function closeModal (update?: boolean) {
  if (update) {
    findRoleList()
  }
  roleModalVisible.value = false
}
</script>

<style lang="scss" scoped></style>
